<template>
  <div class="system-list">
    <heads title="消息"></heads>
    <van-tabs color="#5bbd97" v-model="labelActive">
  <van-tab v-for="(labelItem,labelIndex) in labelList"
            :key="labelIndex" :title="labelItem.text" >
            <div class="nav-place-holder" :style="{height:'44px'}"></div>
       <div class="main-content">
      <van-pull-refresh v-model="isLoading" @refresh="getData">
        <template v-if="list && list.length>0">
          <Cell
            :ListData="item"
            v-for="(item,index) in list"
            :key="index"
            :Type="`${ labelIndex+1 }`"
            @click.native="jump(item)"
          ></Cell>
        </template>
         <van-empty v-else description="没有更多数据了~" />
      </van-pull-refresh>
    </div>
  </van-tab>
</van-tabs>
 <foots :active="3" ></foots>
  </div>
</template>

<script>
import { Toast,Dialog } from "vant";
import * as Config from "@/js/common/config";

export default {
  components: {
    heads: resolve => require(["@/components/common/heads"], resolve),
     foots: resolve => require(["@/components/common/foots"], resolve),
    Cell: resolve => require(["@/components/common/cell-system"], resolve)
  },
  data() {
    return {
      isLoading: true,
      labelActive:0,
      list: [],
      labelList:Config.getMessageType()
    };
  },
  watch: {
    labelActive:{
      handler(newVal,oldVal){
         window.scrollTo(0,0);
        this.getData()
      },
      immediate:true
    }
  },
  methods: {

      getData() {
      let _this = this;
      _this.isLoading = true;
      let _param = {
         "type": _this.labelList[_this.labelActive].value,// 1:聊天消息；2:系统消息
         pageNo:_this.pageNo,
         pageSize:_this.pageSize      
          
      }
      this.$ajax
        .post(`${this.$baseUrl}/im/messageManagement/queryMessageList`, _param)
        .then(function(res) {
          _this.isLoading = false;
          if (res.data.code == 200) {
            _this.list = res.data.data.list;
          }
        })
        .catch(function(error) {
           _this.isLoading = false;
          console.log(error);
        });
    },

    jump(item) {
      if(this.labelActive === 0){
        this.$router.push({path: `/chat/${ encodeURIComponent(item.avatar) }/${ item.userId }` });
        return
      }
      this.$router.push({path: `/messageDetail/${ encodeURIComponent(item.content) }` });
      
      
    }
  },
  created() {
    
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.system-list {
  /deep/ .van-tabs__wrap{
    position: fixed;
    width: 100%;
    z-index: 1;
  }
  .main-content {
    min-height: 92vh;
    margin-top: 0;
    padding: 0.3rem;
    box-sizing: border-box;
  }
  .tabs {
    box-sizing: border-box;
    color: #333333;
    .cell {
    }
  }
}
</style>
